<template>
    <a-modal v-model:visible="idCardShow" title="身份证上传" :width="850" @ok="idCardOk" :destroyOnClose="true" :z-index="20" @cancel="outIdcard" >
        <div style="margin-bottom:20px;font-size:16px">
            <span style="color:#333;margin-right:10px">当前身份证审核状态：</span>
            <template v-if="idCardData">
                <span :style="{ color: share.getExamineState(idCardData.examine)[1] }">{{
                    share.getExamineState(idCardData.examine)[0] }}</span>
            </template>
            <span v-else style="color:gray">未上传身份</span>

        </div>
        <a-image-preview-group v-if="idCardData">
            <a-image :width="300"
                :src="share.http + `/${idCardData.card_dir}/${idCardData.technician_uid}/${idCardData.card}`" />
            <a-image :width="300"
                :src="share.http + `/${idCardData.card_dir}/${idCardData.technician_uid}/${idCardData.card_side}`" />
        </a-image-preview-group>
        <div style="font-size: 16px;color: #333;margin-top: 30px;">上传/修改身份证:</div>
        <a-upload :fileList="idData" :maxCount="2" list-type="picture-card" :beforeUpload="idBefore" @remove="removeId">
            <div>
                <plus-outlined />
                <div style="margin-top: 8px">Upload</div>
            </div>
        </a-upload>
    </a-modal>
</template>

<!-- 技师身份证模块 -->
<script setup>
import { ref, defineProps,defineEmits,watch} from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { techStatAPI,idCardAPI } from '../../../../api/management';
import { useUserData } from '../../../../stores/userData';
import { message } from 'ant-design-vue';
import share from '../../../../util/commnet'

const store = useUserData();    //pinia
const idCardShow = ref(false);  //展开身份证操作模块
const idCardData = ref({});     //数据审核信息

const emit = defineEmits(['setShow'])       //关闭组件的方法
const pros = defineProps({
    idCardData:{                       //拿到uid
        type:Object,
        default:{}
    },
    shows:{                     //是否关闭组件
        type:Boolean,
        default:false
    }
})

watch(                              //监听是否关闭身份证上传模块
    ()=>pros.shows,
    async(n,o)=>{
        if(n && pros.idCardData.uid){                      //当需要显示模块且存在uid时 拉取数据
            idData.value = [];  //重置图片
            idList.value = [];//重置图片
            let res = await techStatAPI(`selIDCard|${pros.idCardData.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (!res || res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            idCardData.value = res.data[0];     //获取身份证审核信息
            idCardShow.value = true;
        }
        idCardShow.value = n;
    }
)


const idData = ref([]);    //身份证展示区
const idList = ref([]);    //身份证保存区
const idBefore = (f) => {       //身份证图片上传之前
    if (!idList.value.every(item => item.name != f.name)) {
        message.error("图像名称重复");
        return
    }
    if (idList.value.length == 2 || idData.value.length == 2) {
        message.error("只能上传两张!!");
        return;
    }
    idList.value.push(f);

    idData.value.push({ url: URL.createObjectURL(f), data: f });
    return false;
};

const removeId = (file) => {        //身份证点击删除
    const index = idData.value.indexOf(file);
    if (index !== -1) {
        idList.value = idList.value.filter(item => item != idData.value[index]?.data);
        idData.value.splice(index, 1);
    }
}

const idCardOk = async () => {             //点击确定修改或上传
    if (idList.value[0] && idList.value[1]) {        //反面和正面
        const type = `OcrCard|${pros.idCardData.phone}|${pros.idCardData.secret_key}|${pros.idCardData.uuid}|admin`;
        let card_side = await idCardAPI(type, idList.value[0]);
        console.log(card_side);
        if (card_side.error != 1) {
            message.error(card_side.message);
            return
        }
        let card = await idCardAPI(type, idList.value[1]);
        console.log(card_side);
        if (card.error != 1) {
            message.error(card.message);
            return
        }
        //进行身份证数据上传
        let cardInfo = [];      //报错身份证的信息数组
        if (card.data.data.side === 'back') {         //防止性别重复 和身份证正反面搞反
            cardInfo = { ...card_side.data.data.info, ...card.data.data.info }
            cardInfo.card_side = card.imgs.name;
            cardInfo.card = card_side.imgs.name;
        } else {
            cardInfo = { ...card.data.data.info, ...card_side.data.data.info }
            cardInfo.card = card.imgs.name;
            cardInfo.card_side = card_side.imgs.name;
        }
        cardInfo.dir = card.imgs.dir;                   //图片目录
        cardInfo.sex = cardInfo.sex == '女' ? 0 : 1;    //性别
        const cardDate = share.formatDateRange(cardInfo.timelimit);
        //进行数据库修改
        let res = await techStatAPI(`IDCardUp|${pros.idCardData.uid}|${cardInfo.name}|${cardInfo.sex}|${cardInfo.year}-${cardInfo.month}-${cardInfo.day}|${cardInfo.number}|${cardInfo.address}|${cardDate[0]}|${cardDate[1]}|${cardInfo.card}|${cardInfo.card_side}|${cardInfo.dir}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
        if (!res || res.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (res.code != 200) {
            message.error(res.message);
            return
        }
        message.success("添加成功")
        emit('setShow',false);
    } else {
        message.error("请上传身份证正反面")
    }

}


const outIdcard = ()=>{               //当点击蒙层或者取消时
    emit('setShow',false)           //传递父组件关闭
}
</script>